import React from "react";
import { useHistory } from "react-router-dom";
export default function ComingSoon(props) {
  const state = ["第一项", "第二项"];
  const history = useHistory();
  const RouterChnage = (index) => {
    //方法一 这些都是是动态路由传参
    //props.history.push(`/detail/${index}`);

    // 类组件前加个this即可
    // this.props.history.push(`/detail/${index}`);

    // 方法二 使用hooks自带的
    // history.push(`/detail/${index}`);

    // 1.动态路由传参
    // history.push(`/detail/${index}`)

    //2. query传参 注意修改路由配置那 不要:id  但是页面刷新会丢失
    // history.push({ pathname: "/detail", query: { id: index } });

    //3.state传参  但是页面刷新会丢失
    history.push({ pathname: "/detail", state: { id: index } });
  };
  return (
    <div>
      <ul>
        {state.map((item, index) => (
          <li key={index} onClick={() => RouterChnage(index)}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}
